<template>
  <div>
    <div class="list-nav">
      <van-nav-bar class="app-nav-bar" title="自定义辅助工时申请" left-arrow @click-left="onClickLeft()" />
    </div>
    <div style="margin-top: 46px;">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="usercode"
          name="usercode"
          label="工号"
          placeholder="工号"
          :rules="[{ required: true, message: '请填写工号' }]"
        />
        <van-field
          v-model="applycategory"
          name="applycategory"
          label="工作内容"
          placeholder="工作内容"
          :rules="[{ required: true, message: '请填写工作内容' }]"
        />

        <van-field
          readonly
          clickable
          name="datetimePicker"
          :value="value"
          label="时间选择"
          placeholder="点击选择时间"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            type="time"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>

        <van-field name="stepper" label="频次选择">
          <template #input>
            <van-stepper v-model="stepper" />
          </template>
        </van-field>

        <van-field name="uploader" label="上传照片">
          <template #input>
            <van-uploader v-model="fileList" multiple :max-count="2" :after-read="afterRead"/>
          </template>
        </van-field>

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
      <div style="font-size: 0.37333rem;color: #646566;" v-model="submitInfo">提交信息：{{submitInfo}}</div>
    </div>
  </div>
</template>

<script>
  export default{
    name:'applyTime',
    data() {
      return {
        username: '',
        usercode: '',
        applycategory:'分饭',
        value: '',
        showPicker: false,
        stepper: 1,
        uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
        submitInfo:'',
        fileList: [
          {
            url: 'https://img01.yzcdn.cn/vant/leaf.jpg',
            status: 'uploading',
            message: '上传中...',
          },
          {
            url: 'https://img01.yzcdn.cn/vant/tree.jpg',
            status: 'failed',
            message: '上传失败',
          },
        ],
      }
    },
    methods:{
      onClickLeft(){
        this.$router.push('/perform/applyList')
      },
      onConfirm(time) {
        this.value = time;
        this.showPicker = false;
      },
      onSubmit(values) {
        console.log('123')
        this.$toast.loading({
          duration: 1000, // 持续时间，0表示持续展示不停止
          forbidClick: true, // 是否禁止背景点击
          message: '上传中...' // 提示消息
        })
        this.submitInfo = values;
      },
      afterRead(file) {
        console.log('123')
        file.status = 'uploading';
        file.message = '上传中...';

        setTimeout(() => {
          file.status = 'failed';
          file.message = '上传失败';
        }, 1000);
      },
    },
    mounted: () => {

    }
  }
</script>

<style>
</style>
